<template>
     <div id="mosk">
        <!-- 做背景遮罩 -->
        <div class="bg"></div>
        <div class="container">
            <div class="top">
                <div class="title">{{seller.name}}</div>
                <div class='starList'>
                    <star size="48" instance='12' :score = seller.score />
                </div>
            </div>
            <div class=info>
                <div class='head'>
                    <div class='line'></div>
                    <div class='title'>优惠信息</div>
                    <div class='line'></div>
                </div>
                <div class='content'>
                    <!-- type item.type size 16 -->
                    <div class='item reduce' v-for="item in seller.supports" :key='item.content'>
                        <bgIcon :type= item.type size = 16 />
                        <div class='desc'>{{item.content}}</div>
                    </div>
                </div>
            </div>
            <div class="notice">
                <div class='head'>
                    <div class='line'></div>
                    <div class='title'>商家公告</div>
                    <div class='line'></div>
                </div>
                <div class='content'>
                    粥品香坊其烹饪粥料的秘方源于中国干年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深的消费者青睐，发展至今成为粥类引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。
                </div>
            </div>
            <div class="exit">
                <div class="layout-close"></div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    components: {},
    data() {
        return {

        };
    },
    computed: {
        ...mapState(['seller'])
    },
    mounted() {},
    }
</script>
 <style scoped>
    .bg{
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 99999;
    }
    .container{
        margin: 0 72rem;
    }
    .container .top{
        padding-top:128rem;
        
    }
    .container .top .title{
        text-align: center;
        font-size: 32rem;
        font-weight: 700;
        color: #fff;
        line-height: 32rem;
    }
    .container .top .starList{
        height: 48rem;
        margin-top: 32rem;
        padding-bottom: 56rem;
        display: flex;
        justify-content: center;
    }
    .container .top .starList .starItem{
        width: 48rem;
        height: 48rem;
        margin-right: 40rem;
        background: url('./img/star24_on@2x.png') no-repeat;
    }
    .container .info .head{
        /* border-top: 1rem solid rgba(255,255,255,0.2); */
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    .container .info .head .line{
        width: 224rem;
        height: 1rem;
        background-color: rgba(255,255,255,0.2);
        
    }
        .container .info .head .title{
        position: absolute;
        left: 50%;
        top: -16rem;
        transform: translate(-50%);
        font-size: 27.5rem;
        font-weight: 700;
        color: #fff;
        padding:0 24rem;
    }
    .container .info .content{
        margin:48rem 24rem 56rem;
    }
    .container .info .content .item{
        display: flex;
        height: 32rem;
        font-size: 24rem;
        font-weight: 200;
        color: #fff;
        line-height: 24rem;
        margin-bottom: 24rem;
        }
        .container .info .content .item .desc{
             margin-left: 12rem;
         }
    .container .info .content .reduce .forwardImg{
        width: 32rem;
        height: 32rem;
       
        background: url('./img/decrease_2@2x.png') no-repeat;
        background-size: cover;
    }
    .container .info .content .discount .forwardImg{
        width: 32rem;
        height: 32rem;
        margin-right: 12rem;
        background: url('./img/discount_2@2x.png') no-repeat;
        background-size: cover;
    }
    .container .info .content .special .forwardImg{
        width: 32rem;
        height: 32rem;
        margin-right: 12rem;
        background: url('./img/guarantee_2@2x.png') no-repeat;
        background-size: cover;
    }
        .container .notice .head{
        /* border-top: 1rem solid rgba(255,255,255,0.2); */
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    .container .notice .head .line{
        width: 224rem;
        height: 1rem;
        background-color: rgba(255,255,255,0.2);
        
    }
        .container .notice .head .title{
        position: absolute;
        left: 50%;
        top: -16rem;
        transform: translate(-50%);
        font-size: 27.5rem;
        font-weight: 700;
        color: #fff;
        padding:0 24rem;
    }
    .container .notice .content{
        margin: 48rem 24rem 0;
        font-size: 24rem;
        font-weight: 200;
        color: #fff;
        line-height: 48rem;
    }
    .container .exit{
        position: absolute;
        bottom:64rem;
        left:50%;
        transform: translate(-50%);
        font-size: 64rem;
        color: rgba(255,255,255,0.5);
    }
</style>